<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.5,user-scalable=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="#" />
    <title>日历Demo</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jshx.echarts.1.0.js"></script>
    <style>
        body {
            height: 100%;
        }

        .demo {
            margin: auto;
            width: 60%;
            height: 600px;
        }

        #main9-1 {
            height: 1000px;
            width: 100%;
        }

        #main9-2 {
            height: 600px;
            width: 60%;
        }

        #main9-3 {
            height: 400px;
            width: 40%;
        }

        .new-demo {
            width: 600px;
            height: 600px;
            margin: 0 auto;
        }

        hr {
            width: 600px;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div id="main14" class="new-demo"></div>
    <hr>
    <div id="main13" class="new-demo"></div>
    <hr>
    <div id="main12" class="new-demo"></div>
    <hr>
    <div id="main11" class="new-demo"></div>
    <hr>
    <div id="main10" class="new-demo"></div>
    <hr>
    <div id="main" class="demo"></div>
    <hr>
    <div id="main2" class="demo"></div>
    <hr>
    <div id="main3" class="demo"></div>
    <hr>
    <div id="main4" class="demo"></div>
    <hr>
    <div id="main5" class="demo"></div>
    <hr>
    <div id="main6" class="demo"></div>
    <hr>
    <div id="main9-1"></div>
    <div id="main9-2"></div>
    <div id="main9-3"></div>
    <script>

        function callback2(param) {
            // alert('第二个回调函数callback2:' + param);
            console.log(param);
        }

        var main = new HxChartCalendar('main', '2019-08');
        var main2 = new HxChartCalendar('main2', '2019-8', '修改数值:setData');
        var main3 = new HxChartCalendar('main3', '2017-2', '修改背景:setBackground,修改回调函数:setCallback');
        var main4 = new HxChartCalendar('main4', '2019-8', '修改年月:setRange');
        var main5 = new HxChartCalendar('main5', '2019-8', '修改标题位置:setTitleX');
        var main6 = new HxChartCalendar('main6', '2019-8', '修改标题左边距:setTitleLeft');
        var main9_1 = new HxChartCalendar('main9-1', '2019-8', "setSize('l')");
        var main9_2 = new HxChartCalendar('main9-2', '2019-8', "setSize('m')");
        var main9_3 = new HxChartCalendar('main9-3', '2019-8', "setSize('s')");
        var main10 = new HxChartCalendar('main10', '2019-8', '鼠标悬停边框颜色setHoverBorder');
        var main11 = new HxChartCalendar('main11', '201908', '鼠标点击边框颜色setClickBorder');
        var main12 = new HxChartCalendar('main12', '2019,8', '鼠标点击日期字体颜色setClickColor');
        var main13 = new HxChartCalendar('main13', '2019/8', '鼠标点击日期字体下划线setClickUnderline');
        var main14 = new HxChartCalendar('main14', '201908', '鼠标点击改变日期字体粗细setClickFontWeight');

        main.init();
        main2.init();
        main3.init();
        main4.init();
        main5.init();
        main6.init();
        main9_1.init();
        main9_2.init();
        main9_3.init();
        main10.init();
        main11.init();
        main12.init();
        main13.init();
        main14.init();



        // 2019-09-26更新
        // 移除年份,月份和标题
        // main.trim();
        main.putData('2019-08-01', 400);
        main.putData('2019-08-02', '字符串');
        main.putData('2019/08/03', '2019/08/03');
        main.putData('2019 08 04', '2019 08 04');
        main.putData('2019,08,05', '2019,08,05');
        main.putData('2019/8/6', '2019/8/6');
        main.putData('2019.8.7', '2019.8.7');
        main.putData('20190808', '20190808');
        // 添加自带图片，目前有四种:putImg
        main.putImg('20190812', iconWork);
        main.putImg('2019/08/13', iconWork);
        main.putImg('2019-08-14', iconTick);
        main.putImg('2019.08.15', iconCross);
        main.putImg('2019-08-16', iconFlag);

        // 也可添加base64格式的图片
        main.putImg('2019-08-17', '');
        main.putImg('2019-08-18', 'https://www.baidu.com/img/baidu_jgylogo3.gif');
        // 添加点击事件
        function callback(param) {
            console.log(param);
            main.putImg(param, iconTick);
        }
        main.setCbClick(callback);

        // 移除指定日期图标:removeImg
        // 取消默认右键事件
        document.getElementById('main').oncontextmenu = function () { return false; };
        // 添加右键事件
        function contextmenuCallback(param) {
            console.log(param);
            main.removeImg(param);
        }
        main.setContextmenu(contextmenuCallback);




        // 修改数值并重载图表,数值以时间戳毫秒格式显示在日历中
        main2.putData('2019-08-12', 400);
        main2.setCbClick(callback2);
        // 修改背景并重载图表
        main3.setBackground('#f9f1f1');
        // 修改回调函数
        main3.setCbClick(function (param) {
            alert('第三个回调函数callback3:' + param);
        })
        // 修改年月并重载图表
        main4.setRange('2019-10');
        // 修改标题位置并重载图表
        main5.setTitleLocation('l')
        // 修改标题左边距并重载图表
        main6.setTitleLocation('c');


        main9_1.setSize('l');
        main9_2.setSize('m');
        main9_3.setSize('s');


        main10.setHoverBorder('#8FC6FF');
        main11.setClickBorder('#409EFF');

        main12.setClickColor('red');
        main13.setClickUnderline('blue');
        main14.setClickFontWeight(900);
        main14.trim();


    </script>
</body>

</html>